<template>
	<view class="custom-number-box">
		<view class="minus" @click="handleMinus">
			<image src="/static/common/minus.png" mode="widthFix"></image>
		</view>
		<view class="input">
			<input 
				:placeholder="placeholder" 
				:value="modelValue" 
				@input="onInput" 
				:type="type" 
				:disabled="disabled" v-if="show" />
			<view class="text" v-else>{{ modelValue }}</view>
		</view>
		<view class="plus" @click="handlePlus">
			<image src="/static/common/plus.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
	import { ref,defineComponent,defineProps, onMounted } from 'vue';
	import { floatAdd,floatSub } from '../../utils/util.js'

	defineComponent({
		name:'custom-number-box'
	})
	
	const props = defineProps({
		modelValue: {
			type: Number,
			default: 0
		},
		type: {
			type: String,
			default: 'number'
		},
		disabled:{
			type:Boolean,
			default:false
		},
		step:{
			type: Number,
			default: 1
		},
		placeholder:{
			type:String,
			default:'请输入'
		},
		max:{
			type: Number,
			default: 99
		}
	})
	
	const emit = defineEmits(['update:modelValue'])
	
	const onInput = (event) => {
	  // 如果使用原生 input，可能需要 event.detail.value；u-input 可能直接返回值
	  const value = event.detail?.value ?? event;
	  emit('update:modelValue', Number(value));
	};
	
	const handlePlus = ()=>{
		if(!props.modelValue){
			emit('update:modelValue',1)
			return
		}
		if(props.modelValue == props.max)return;
		emit('update:modelValue',floatAdd(props.modelValue,props.step))
	}
	const handleMinus = ()=>{
		if(props.modelValue > 0){
			const value = floatSub(props.modelValue,props.step) < 0 ? 0:floatSub(props.modelValue,props.step)
			emit('update:modelValue',value)
		}
	}
	
	const show = ref(true)
	
	onMounted(()=>{
		// setTimeout(()=>{
		// 	show.value = true
		// },300)
	})
</script>

<style lang="scss">
	.custom-number-box{
		display: flex;
		justify-content: center;
		.minus,.plus{
			width: 60rpx;
			height: 60rpx;
		}
		.input{
			width: 180rpx;
			height: 60rpx;
			border-radius: 8rpx;
			background: rgba(241, 241, 241, 1);
			margin: 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			input{
				color: #666666;
				font-size: 28rpx;
				text-align: center;
			}
		}
	}
</style>